<template>
    <div class="room-order-box">
        <div class="lists" v-for="(item,k) of lists">
            <div class="item">
                <div class="no">
                    <span>第{{item.issue_no}}期</span>
                    <div class="status">
                        <span class="unconfirmed" v-if="item.status === 0">未确认</span>
                        <span class="confirm" v-else-if="item.status === 1">已确认,未开奖</span>
                        <span class="open" v-else-if="item.status === 2">已开奖</span>
                        <span class="success" v-else-if="item.status === 3">已结算</span>
                        <span class="cancel" v-else-if="item.status === 4">已取消</span>
                        <span class="actor" v-else-if="item.status === 5">演员单</span>
                    </div>
                </div>
                <div class="info">
                    <div class="user">
                        <span style="color: #FF2045">&#xe604;</span>
                        {{item.user.userName}}
                    </div>
                    <div class="gold">
                        <span style="color: #FF8D24">&#xe934;</span>
                        {{item.amount}}
                    </div>
                    <mt-badge class="profit" type="error" v-if="item.profit >= 0">+{{item.profit}}</mt-badge>
                    <mt-badge class="profit" type="success" v-else>{{item.profit}}</mt-badge>
                </div>
                <div class="details">
                    <div class="title">
                        <span>名次</span>
                        <span>注码</span>
                        <span>金额</span>
                        <span>赔率</span>
                    </div>
                    <div class="betss" v-for="betss of item.arr">
                        <span>{{betss[0]}}</span>
                        <span>{{betss[1]}}</span>
                        <span>{{betss[2]}}</span>
                        <span>{{betss[3]}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="next" v-if="!nullData && !loading" @click="loadMore">下一页 &#xe701;</div>
        <div class="loading" v-if="loading">数据加载中...</div>
        <div class="null" v-if="nullData">没有更多数据了</div>
    </div>
</template>

<script>
    import apiUrl from '@/api/apiUrl'
    import {Toast} from 'mint-ui'
    export default {
        name: "index",
        data () {
            return {
                lists: [],
                loading: false,
                nullData: false,
                page: 1
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods: {
            loadMore(){
                this.setData(this.$route.query)
            },
            setData() {
                this.loading = true
                let params = {
                    params: {
                        page: this.page
                    }
                }
                this.$http.get(apiUrl.room.orderLists, params).then(res => {
                    if (res.data.code === 0) {
                        res.data.result.forEach(v => {
                            let betssArr = []
                            let temp = v.betss.split(',')
                            temp.forEach(arr => {
                                let t = arr.split('|')
                                betssArr.push(t)
                            })
                            v.arr = betssArr
                            this.lists.push(v)
                        })
                        if (res.data.result.length < 20) {
                            this.nullData = true
                        }
                    } else {
                        Toast(res.data.msg)
                    }
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                    console.log(err)
                })
                this.page++
            }
        }
    }
</script>

<style scoped lang="less">
@import "../../../assets/css/bases";
    .room-order-box {
        .next, .loading, .null {
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        .loading, .null {
            color: @gray;
        }
        .lists {
            .item {
                border-bottom: #f1f1f1 solid 8px;
                .no {
                    font-size: 1.2rem;
                    height: 30px;
                    line-height: 30px;
                    padding: @default @default 0 @default ;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .status {
                        font-size: @default;
                        .success{
                            color: #55a532;
                        }
                        .cancel {
                            color: @gray;
                        }
                    }
                }
                .info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 @default;
                }
                .details {
                    margin-top: 10px;
                    .title, .betss {
                        padding: 0 @default;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 30px;
                        line-height: 30px;
                        color: #999;
                        span {
                            text-align: center;
                        }
                    }
                    .title {
                        background: #f1f1f1;
                    }
                }
            }
        }
    }
</style>